<template>
	<view class="content">
		<view class="headertop" :style="{'background':flag1?'#000':''}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 2@2x.png" class="pagelefticon"
					mode=""></image>
			</view>
		</view>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11445@2x.png" class="contentimg" mode="">
		</image>
		<view class="centeruser" @click="gopage('个人信息')">
			<image :src="userobj.avatar||'https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250510120328.png'"
				mode="" class="avtar"></image>
			<view class="usertext" v-if="userobj.avatar">
				<view class="nickname">
					{{userobj.nickname}}
				</view>
				<view class="mobilebox">
					{{userobj.mobile.slice(0,3)}}****{{userobj.mobile.slice(7,11)}}
				</view>
			</view>
			<view class="usertext" v-if="!userobj.nickname">
				<view class="nickname">
					未登录
				</view>
			</view>
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11446@2x.png" class="shezhi" mode="">
			</image>
		</view>
		<view class="btnss">
			<view class="btnss_btn" @click="gopage('充值中心')">
				<view class="lefttext">
					<view class="t1">
						充值中心
					</view>
					<view class="t2">
						充值消费更优惠
					</view>
				</view>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(14).png" class="righticon"
					mode=""></image>
			</view>
			<view class="btnss_btn" @click="gopage('我的钱包')">
				<view class="lefttext">
					<view class="t1">
						我的钱包
					</view>
					<view class="t2">
						随时查看账户余额
					</view>
				</view>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(15).png" class="righticon"
					mode=""></image>
			</view>
		</view>
		<view class="bottomcentent">
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11447@2x.png"
				class="bottomcentent_back" mode=""></image>
			<view class="bottomcentent_centercontnt">
				<view class="huiyuaninfo">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(4).png"
						class="huiyuaninfo_leftimg" mode="">
					</image>
					<view class="texts">
						<view class="t1">
							{{!userobj.level?'VIP露营会员':userobj.leveltitle}}
						</view>
						<view class="t2">
							{{!userobj.level?'成为会员享受专属权益':'会员截止时间：'+timestampfun(userobj.levelend*1000)}}
						</view>
					</view>
					<view class="kthybtn" @click="gopage('开通会员')">
						{{!userobj.level?'开通会员':'续费'}}

					</view>
				</view>
				<view class="orderbox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11494@2x.png"
						class="orderbox_back" mode="" v-if="active==0"></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11492@2x.png"
						class="orderbox_back" mode="" v-if="active==1"></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11493@2x.png"
						class="orderbox_back" mode="" v-if="active==2"></image>
					<view class="titleline">
						<view :class="active==0?'titlebox color':'titlebox'" @click="active=0">
							营位订单
						</view>
						<view :class="active==1?'titlebox color':'titlebox'" @click="active=1">
							租赁订单
						</view>
						<view :class="active==2?'titlebox color':'titlebox'" @click="active=2">
							商城订单
						</view>
					</view>
					<view class="dingdantype">
						<view class="jinduxianshi">
							<view class="jindu" :style="{'margin-left':left}">

							</view>
						</view>
						<scroll-view class="scroll-view_H" @scrolltoupper="scrollfun" @scrolltolower="scrollfun1"
							scroll-x="true">
							<view class="scroll-view-item_H" v-for="(item,index) in  arr0" v-if="active==0"
								@click="gopage('营位订单',index)">
								<view class="box">
									<template v-if="userobj.camps">
										<view class="readuce" v-if="index==0&&userobj.camps['status1']">
											{{userobj.camps['status1']}}
										</view>
										<view class="readuce" v-if="index==1&&userobj.camps['status2']">
											{{userobj.camps['status2']}}
										</view>
										<view class="readuce" v-if="index==2&&userobj.camps['status3']">
											{{userobj.camps['status3']}}
										</view>
										<view class="readuce" v-if="index==3&&userobj.camps['status4']">
											{{userobj.camps['status4']}}
										</view>
										<view class="readuce" v-if="index==4&&userobj.camps['status7']">
											{{userobj.camps['status7']}}
										</view>
										<view class="readuce" v-if="index==5&&userobj.camps['status5']">
											{{userobj.camps['status5']}}
										</view>
										<view class="readuce" v-if="index==6&&userobj.camps['status6']">
											{{userobj.camps['status6']}}
										</view>
									</template>

									<image :src="item.src" class="icon" mode="">
									</image>
									<view class="statustext">
										{{item.title}}
									</view>
								</view>
							</view>
							<view class="scroll-view-item_H" v-for="(item,index) in  arr1" v-if="active==1"
								@click="gopage('租赁订单',index)">
								<view class="box">
									<template v-if="userobj.lease">
										<view class="readuce" v-if="index==0&&userobj.lease['status1']">
											{{userobj.lease['status1']}}
										</view>
										<view class="readuce" v-if="index==1&&userobj.lease['status2']">
											{{userobj.lease['status2']}}
										</view>
										<view class="readuce" v-if="index==2&&userobj.lease['status3']">
											{{userobj.lease['status3']}}
										</view>
										<view class="readuce" v-if="index==3&&userobj.lease['status8']">
											{{userobj.lease['status8']}}
										</view>
										<view class="readuce" v-if="index==4&&userobj.lease['status4']">
											{{userobj.lease['status4']}}
										</view>
										<view class="readuce" v-if="index==5&&userobj.lease['status5']">
											{{userobj.lease['status5']}}
										</view>
										<view class="readuce" v-if="index==6&&userobj.lease['status7']">
											{{userobj.lease['status7']}}
										</view>
										<view class="readuce" v-if="index==7&&userobj.lease['status6']">
											{{userobj.lease['status6']}}
										</view>
									</template>
									<image :src="item.src" class="icon" mode="">
									</image>
									<view class="statustext">
										{{item.title}}
									</view>
								</view>
							</view>
							<view class="scroll-view-item_H" v-for="(item,index) in  arr2" v-if="active==2"
								@click="gopage('商城订单',index)">
								<view class="box">
									<template v-if="userobj.goods">
										<view class="readuce" v-if="index==0&&userobj.goods['status1']">
											{{userobj.goods['status1']}}
										</view>
										<view class="readuce" v-if="index==1&&userobj.goods['status2']">
											{{userobj.goods['status2']}}
										</view>
										<view class="readuce" v-if="index==2&&userobj.goods['status3']">
											{{userobj.goods['status3']}}
										</view>
										<view class="readuce" v-if="index==3&&userobj.goods['status4']">
											{{userobj.goods['status4']}}
										</view>
										<view class="readuce" v-if="index==4&&userobj.goods['status5']">
											{{userobj.goods['status5']}}
										</view>
										<view class="readuce" v-if="index==5&&userobj.goods['status6']">
											{{userobj.goods['status6']}}
										</view>
									</template>
									<image :src="item.src" class="icon" mode="">
									</image>
									<view class="statustext">
										{{item.title}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="allbox" @click="gopage('全部')">
							<view class="box">
								<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(17).png"
									class="icon" mode="">
								</image>
								<view class="statustext">
									全部
								</view>
							</view>
						</view>
					</view>
				</view>
				<image :src="shangwuobj.sw_image" @click="gopage('商务合作')" class="gg" mode="">
				</image>
				<view class="dcd">
					<view class="dcdcenter">
						<view class="itembox" @click="gopage('核销通道')" v-if="bool1">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(18).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								核销通道
							</view>
						</view>
						<view class="itembox" @click="gopage('押金记录')">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(23).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								押金记录
							</view>
						</view>
						<view class="itembox" @click="gopage('购物车')">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(22).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								购物车
							</view>
						</view>
						<view class="itembox" @click="gopage('地址管理')">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(21).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								地址管理
							</view>
						</view>
						<button open-type="contact" class="itembox">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(20).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								在线客服
							</view>
						</button>
						<view class="itembox" @click="gopage('联系我们')">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(19).png"
								class="itembox_icon" mode="">
							</image>
							<view class="title">
								联系我们
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="center">
			<view class="popucenter" v-if="false">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group@2x.png" class="popucenterimg"
					mode=""></image>
				<view class="title">
					提交成功
				</view>
				<view class="text">
					感谢您的合作申请！
				</view>
				<view class="btn">
					确认
				</view>
			</view>
			<view class="popucenter1" v-if="showstr=='商务合作'">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250429115018.png"
					class="popucenter1_close" @click="show=false" mode="">
				</image>
				<view class="title">
					商务合作
				</view>
				<view class="forms">
					<view class="inputbox">
						<view class="labletext">
							联系人：
						</view>
						<input type="text" v-model="query.username" placeholder="请输入联系人名称" />
					</view>
					<view class="inputbox">
						<view class="labletext">
							联系电话：
						</view>
						<input type="number" v-model="query.telphone" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="hezuotext">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250429114215.png" mode="">
					</image>
					<view class="text">
						合作说明：{{shangwuobj.sw_detail}}
					</view>
				</view>
				<view class="btnborder" @click="boda(shangwuobj.sw_telphone)">
					合作热线：{{shangwuobj.sw_telphone}}
				</view>
				<view class="savetj" @click="tijiao">
					提交信息
				</view>
			</view>
			<view class="popucenter1" v-if="showstr=='联系我们'">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250429115018.png"
					@click="show=false" class="popucenter1_close" mode="">
				</image>
				<view class="title">
					联系我们
				</view>
				<view class="forms">
					<view class="inputbox">
						<view class="labletext">
							客户微信：
						</view>
						<input type="text" v-model="cmpfileobj.kf_weixin" :disabled="true" placeholder="请输入客户微信" />
					</view>
					<view class="inputbox">
						<view class="labletext">
							联系电话：
						</view>
						<input type="text" v-model="cmpfileobj.kf_telphone" :disabled="true" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="savetj" @click="show=false">
					确认
				</view>
			</view>
		</up-popup>
		<Tabbar page="/pages/my/index"></Tabbar>
		<!-- 占位符 -->
		<view class="" style="height: 250rpx;">
		</view>
		<userlogin ref="denglu" @updata="getuser"></userlogin>
	</view>
</template>

<script setup>
	import Tabbar from '@/components/tabbar.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		userinfo,
		cmpfile,
		swfile,
		swadd,
	} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const current = ref(0)
	const active = ref(0)
	const query = reactive({
		username: "",
		telphone: ""
	})
	const cmpfileobj = ref({})
	const page = ref('')
	const left = ref('')
	const userobj = ref({})
	const showstr = ref('')
	const flag1 = ref(false)
	const bool1 = ref(false)
	const statusBarHeight = ref(0)
	const show = ref(false)
	const barHeight = ref('')
	const shangwuobj = ref({})
	const denglu = ref(null)
	const arr0 = [{
			title: '待支付',
			src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(16).png'
		}, {
			title: '待入营',
			src: '/static/wxFrame@2x(8).png'
		}, {
			title: '露营中',
			src: '/static/wxFrame@2x(14).png'
		}, {
			title: '待退还',
			src: '/static/wxFrame@2x(10).png'
		}, {
			title: '退还中',
			src: '/static/Frame@2x(8).png'
		},
		{
			title: '已取消',
			src: '/static/Frame@2x(10).png'
		},
		{
			title: '已完成',
			src: '/static/Frame@2x(14).png'
		}
	]

	const arr1 = [{
		title: '待支付',
		src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(16).png'
	}, {
		title: '待核销',
		src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(49).png'
	}, {
		title: '租赁中',
		src: '/static/Frame@2x(13).png'
	}, {
		title: '可退押',
		src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(50).png'
	}, {
		title: '待退还',
		src: '/static/wxFrame@2x(10).png'
	}, {
		title: '退还中',
		src: '/static/Frame@2x(8).png'
	}, {
		title: '已取消',
		src: '/static/Frame@2x(10).png'
	}, {
		title: '已完成',
		src: '/static/Frame@2x(14).png'
	}]
	const arr2 = [{
		title: '待支付',
		src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(16).png'
	}, {
		title: '待核销',
		src: 'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(49).png'
	}, {
		title: '待发货',
		src: '/static/Frame@2x(11).png'
	}, {
		title: '待收货',
		src: '/static/Frame@2x(12).png'
	}, {
		title: '已取消',
		src: '/static/Frame@2x(10).png'
	}, {
		title: '已完成',
		src: '/static/Frame@2x(14).png'
	}]

	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeeeee');
		if (e.scrollTop > 100) {
			flag1.value = true
		} else {
			flag1.value = false
		}
	})
	onShow(() => {
		page.value = '/sub_my/my/index'
		if (uni.getStorageSync('token')) {
			getuser()
			lianxiwomeninit()
		} else {
			userobj.value = {
				avatar: '',
				level: 0
			}
		}
		shangwuxinxi()
	})


	function timestampfun(time) {
		const date = new Date(time);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0");
		const day = String(date.getDate()).padStart(2, "0");
		const hours = String(date.getHours()).padStart(2, "0");
		const minutes = String(date.getMinutes()).padStart(2, "0");
		const seconds = String(date.getSeconds()).padStart(2, "0");
		const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		return formattedDate
	}

	function boda(phone) {
		uni.showActionSheet({
			// this.content.serviceTel
			itemList: [phone], //itemList字段不变
			success: function(res) {
				if (res.tapIndex !== undefined) {
					uni.makePhoneCall({
						phoneNumber: phone,
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
				}
			}.bind(this) // 绑定this作用域
		});
	}
	async function tijiao() {
		for (var i in query) {
			if (!query[i]) {
				uni.showToast({
					title: '必须补全信息提交',
					icon: 'none'
				})
				return
			}
		}
		if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(query.telphone))) { //校验手机号码是否有误
			uni.showToast({
				title: '请填写正确手机号码',
				icon: "none"
			});
			return;
		}
		const res = await swadd(query)
		if (res.data.code == 1) {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			})
			show.value = false
		} else {
			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			})
		}

	}
	async function shangwuxinxi() {
		const res = await swfile()
		if (res.data.code == 1) {
			shangwuobj.value = res.data.data
		}
	}

	async function lianxiwomeninit() {
		const res = await cmpfile()
		if (res.data.code == 1) {
			cmpfileobj.value = res.data.data
		}
	}
	async function getuser() {
		const res = await userinfo()
		if (res.data.code == 1) {
			userobj.value = res.data.data
			if (userobj.value.is_hexiao == 0) {
				bool1.value = false
			} else {
				bool1.value = true
			}
		}
	}

	function scrollfun(e) {
		left.value = '0'
		console.log(e, '左eeeeeeeeeeeee');
	}

	function scrollfun1(e) {
		left.value = '26rpx'
		console.log(e, '右eeeeeeeeeeeee');
	}

	function gopage(str, id) {
		if (!uni.getStorageSync('token')) {
			console.log(123123, denglu.value, 'denglu.valuedenglu.valuedenglu.value');
			denglu.value.DengLu()
			return
		}
		console.log(123123);
		if (str == '开通会员') {
			uni.navigateTo({
				url: '/sub_my/my/memberquanyi'
			})
		} else if (str == '个人信息') {
			uni.navigateTo({
				url: '/sub_my/my/userinfo'
			})
		} else if (str == '我的钱包') {
			uni.navigateTo({
				url: '/sub_my/my/myqianbao'
			})
		} else if (str == '充值中心') {
			uni.navigateTo({
				url: '/sub_my/my/chongzhi'
			})
		} else if (str == '押金记录') {
			uni.navigateTo({
				url: '/sub_my/my/yajinrecord'
			})
		} else if (str == '购物车') {
			uni.navigateTo({
				url: '/sub_commodity/commodity/gouwuche'
			})
		} else if (str == '核销通道') {
			uni.navigateTo({
				url: '/sub_my/my/hexiaotongdao'
			})
		} else if (str == '押金记录') {
			uni.navigateTo({
				url: '/sub_my/my/yajinrecord'
			})
		} else if (str == '地址管理') {
			uni.navigateTo({
				url: '/sub_my/my/shouhuoaddress'
			})
		} else if (str == '在线客服') {

		} else if (str == '联系我们') {
			show.value = true
			showstr.value = '联系我们'

		} else if (str == '商务合作') {
			show.value = true
			showstr.value = '商务合作'

		} else if (str == '营位订单') {
			uni.navigateTo({
				url: '/sub_my/my/yingweiorder?active=' + id
			})

		} else if (str == '租赁订单') {
			uni.navigateTo({
				url: '/sub_my/my/zupingorder?active=' + id
			})

		} else if (str == '商城订单') {
			uni.navigateTo({
				url: '/sub_my/my/shangchengorider?active=' + id
			})

		} else if (str == '全部') {
			if (active.value == 0) {
				uni.navigateTo({
					url: '/sub_my/my/yingweiorder'
				})
			} else if (active.value == 1) {
				uni.navigateTo({
					url: '/sub_my/my/zupingorder'
				})
			} else {
				uni.navigateTo({
					url: '/sub_my/my/shangchengorider'
				})
			}


		}

	}
</script>

<style lang="scss">
	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	.popucenter1 {
		width: 636rpx;
		overflow: hidden;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		background: linear-gradient(180deg, #F4FFF5 0%, #FFFFFF 31%);
		position: relative;

		&_close {
			right: 0%;
			top: 0%;
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			margin-top: 20rpx;
			margin-right: 26rpx;
		}

		.title {
			width: 100%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
			margin-top: 48rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.btnborder {
			width: 572rpx;
			height: 72rpx;
			border: 2rpx solid #7EBC79;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #7EBC79;
			margin: auto;
			margin-top: 60rpx;
		}

		.savetj {
			width: 572rpx;
			height: 72rpx;
			background: #7EBC79;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			margin: auto;
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			margin-bottom: 48rpx;
		}

		.hezuotext {
			width: 572rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 30rpx;
			display: flex;

			image {
				width: 24.5rpx;
				height: 24.5rpx;
				margin-top: 5rpx;
			}

			.text {
				width: 536rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #86909C;
				margin-left: 5rpx;
				max-height: 200rpx;
				overflow-y: scroll;
			}
		}

		.forms {
			width: 572rpx;
			margin: auto;
			margin-top: 48rpx;
			overflow: hidden;

			.inputbox {
				width: 572rpx;
				height: 84rpx;
				background: #F7F8FA;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.labletext {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					margin-left: 30rpx;
				}

				input {
					font-size: 28rpx;
					text-align: right;
					margin-right: 30rpx;
				}
			}
		}
	}

	.popucenter {
		width: 592rpx;
		height: 596rpx;
		background: linear-gradient(180deg, #F4FFF5 0%, #FFFFFF 31%);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		.popucenterimg {
			width: 355.92rpx;
			height: 315.24rpx;
			margin-top: 22rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
			margin-bottom: 24rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #4E5969;
		}

		.btn {
			width: 422rpx;
			height: 64rpx;
			background: #7EBC79;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 64rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 22rpx;
		}

		.lookorder {
			width: 422rpx;
			height: 64rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #7EBC79;
			text-align: center;
			line-height: 64rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			margin-top: 24rpx;
			color: #7EBC79;
		}
	}

	.headertop {
		width: 100%;
		position: fixed;
		top: 0%;
		overflow: hidden;
		transition: 0.5s;
		z-index: 9999;
	}

	.pagelefticon {
		width: 165.65rpx;
		height: 36.64rpx;
		margin-left: 30rpx;
	}

	.dcdcenter .itembox:nth-child(3n) {
		margin-right: 0rpx !important;
	}

	.content {
		width: 100%;
		overflow: hidden;
		position: relative;

		.color {
			color: #508C42;
		}


		.bottomcentent {
			width: 100%;
			overflow: hidden;
			margin-top: 32rpx;
			position: relative;

			&_centercontnt {
				width: 686rpx;
				margin: auto;
				overflow: hidden;

				.gg {
					width: 100%;
					height: 186rpx;
					margin-top: 28rpx;
				}

				.dcd {
					width: 100%;
					margin-top: 28rpx;
					height: 333rpx;
					background: linear-gradient(#FFFFFF 0%, #FAFFF3 100%);
					box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(190, 216, 148, 0.5);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 80rpx;

					.dcdcenter {
						width: 592rpx;
						display: flex;
						flex-wrap: wrap;
						margin: auto;
						align-items: center;

						button {
							border: none !important;
							align-items: center;
							overflow: auto !important;
							background: none !important;
							background-color: none !important;
							background-size: 100% 138% !important;
							padding-left: 0 !important;
							padding-right: 0 !important;
							margin-left: 0rpx !important;
							-webkit-tap-highlight-color: none !important;
							overflow: hidden !important;

							&:after {
								background: none !important;
								border: none;
								background-color: none !important;
								display: none !important;
							}
						}


						.itembox {
							width: 112rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: 38rpx;
							margin-right: 128rpx;
							line-height: 36rpx;

							&_icon {
								width: 52rpx;
								height: 52rpx;
							}

							.title {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #47533D;
								margin-top: 20rpx;
							}
						}
					}
				}

				.orderbox {
					width: 100%;
					overflow: hidden;
					margin-top: 76rpx;
					width: 680rpx;
					height: 240rpx;
					overflow: hidden;
					position: relative;
					border-radius: 28rpx 28rpx 28rpx 28rpx;

					&_back {
						width: 686rpx;
						// height: 244rpx;
						height: 264rpx;
						position: absolute;
						z-index: -1;
					}

					.dingdantype {
						width: 100%;
						overflow: hidden;
						display: flex;
						height: 158rpx;
						align-items: center;
						position: relative;

						.jinduxianshi {
							width: 52rpx;
							height: 4rpx;
							background: rgba(126, 183, 37, 0.21);
							border-radius: 2rpx 2rpx 2rpx 2rpx;
							width: 52rpx;
							height: 4rpx;
							background: rgba(126, 183, 37, 0.21);
							border-radius: 2rpx 2rpx 2rpx 2rpx;
							position: absolute;
							bottom: 2%;
							margin-left: 318rpx;

							.jindu {
								width: 50%;
								height: 4rpx;
								background: #508C42;
								border-radius: 2rpx 2rpx 2rpx 2rpx;

							}
						}

						::-webkit-scrollbar {
							display: block;
							/* 显示滚动条 */
							width: 8px;
							/* 滚动条的宽度 */
							height: 8px;
							/* 滚动条的高度 */
						}

						::-webkit-scrollbar-thumb {
							background-color: red;
							/* 滚动条滑块的颜色 */
							border-radius: 10px;
							/* 滚动条滑块的圆角 */
						}

						::-webkit-scrollbar-track {
							background-color: #f5f5f5;
							/* 滚动条轨道的颜色 */
							border-radius: 10px;
							/* 滚动条轨道的圆角 */
						}

						.allbox {
							width: 110rpx;
							background: #F9FDF3;
							border-radius: 0rpx 28rpx 28rpx 0rpx;
							height: 100%;
							box-shadow: -8px 0 8px -6px #9AC58D;

							.box {
								display: flex;
								flex-direction: column;
								align-items: center;
								position: relative;

								.readuce {
									padding: 0 8rpx;
									height: 24rpx;
									background: red;
									font-size: 22rpx;
									color: #fff;
									text-align: center;
									line-height: 24rpx;
									position: absolute;
									border-radius: 50%;
									top: 14rpx;
									left: 72rpx;
								}

								.icon {
									width: 60rpx;
									height: 60rpx;
									margin-top: 30rpx;
									margin-bottom: 16rpx;
								}

								.statustext {
									font-weight: 400;
									font-size: 24rpx;
									color: #727272;
								}
							}
						}

						.scroll-view_H {
							white-space: nowrap;
							width: 544rpx;
							height: 100%;
							margin-left: 32rpx;
						}

						.scroll-view-item_H {
							display: inline-block;
							border-radius: 16rpx;
							overflow: hidden;
							margin-right: 32rpx;
							width: 110rpx;

							.box {
								display: flex;
								flex-direction: column;
								align-items: center;
								position: relative;

								.readuce {
									padding: 0 8rpx;
									height: 24rpx;
									background: red;
									font-size: 22rpx;
									color: #fff;
									text-align: center;
									line-height: 24rpx;
									position: absolute;
									border-radius: 50%;
									top: 14rpx;
									left: 75rpx;
								}

								.icon {
									width: 64rpx;
									margin-bottom: 16rpx;
									height: 64rpx;
									margin-top: 30rpx;
								}

								.statustext {
									font-weight: 400;
									font-size: 24rpx;
									color: #727272;
								}
							}

						}
					}

					.titleline {
						width: 100%;
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						height: 76rpx;

						.titlebox {
							width: 228.6rpx;
							text-align: center;

						}
					}
				}

				.huiyuaninfo {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					&_leftimg {
						width: 126rpx;
						height: 138rpx;
						margin-left: 30rpx;
					}

					.kthybtn {
						width: 160rpx;
						height: 52rpx;
						background: #7EBC79;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(91, 155, 86, 0.42);
						border-radius: 27rpx 27rpx 27rpx 27rpx;
						text-align: center;
						line-height: 52rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						margin-left: 58rpx;
						color: #FFFFFF;
						z-index: 999;
					}

					.texts {
						margin-left: 12rpx;
						width: 280rpx;

						.t1 {
							font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
							font-weight: bold;
							font-size: 35rpx;
							color: #4A833F;
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #4A833F;
							margin-top: 20rpx;
						}
					}
				}
			}

			&_back {
				width: 100%;
				height: 1412rpx;
				position: absolute;
				z-index: -1;
			}
		}

		.btnss {
			width: 686rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			align-items: center;
			margin-top: 28rpx;
			overflow: hidden;

			&_btn {
				width: 330rpx;
				height: 138rpx;
				background: #78AE6D;
				box-shadow: 0rpx 8rpx 8rpx 0rpx #639F57;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 1rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.righticon {
					width: 88rpx;
					height: 88rpx;
					margin-right: 16rpx;
				}

				.lefttext {
					width: 192rpx;
					margin-left: 22rpx;

					.t1 {
						font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						margin-bottom: 16rpx;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.centeruser {
			width: 686rpx;
			margin: auto;
			display: flex;
			align-items: center;
			overflow: hidden;
			margin-top: 200rpx;

			.avtar {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
			}

			.shezhi {
				width: 88rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 23rpx 23rpx 23rpx 23rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 256rpx;

			}

			.usertext {
				width: 210rpx;
				margin-left: 16rpx;

				.nickname {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.mobilebox {
					width: 202rpx;
					height: 40rpx;
					background: rgba(255, 255, 255, 0.36);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					text-align: center;
					line-height: 40rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #47743D;
					margin-top: 20rpx;
				}
			}
		}

		.contentimg {
			position: absolute;
			width: 750rpx;
			height: 788rpx;
			z-index: -1;
		}
	}
</style>